<!doctype html>
<html>

<head>
    <meta charset="utf-8">
    <title>退款</title>
    <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0">
    <link rel="stylesheet" href="/node_modules/LobsterUIFrame/weui/css/weui.css" />
    <link rel="stylesheet" href="/node_modules/LobsterUIFrame/weui/css/weuix.css" />
    <!-- <link rel="stylesheet" href="../css/smartphoto.min.css" /> -->
    <script src="/node_modules/LobsterUIFrame/weui/js/zepto.min.js"></script>
    <script src="/node_modules/LobsterUIFrame/weui/js/zepto.weui.js"></script>
    <script src="/node_modules/LobsterUIFrame/weui/js/swipe.js"></script>
    <script src="/node_modules/LobsterUIFrame/weui/js/macy.js"></script>
    <script src="/node_modules/LobsterUIFrame/weui/js/php.js"></script>
    <script src="/node_modules/LobsterUIFrame/weui/js/lrz.min.js"></script>
    <script src="/lobstersdk/lobster.js"></script>
    <script src="/jslib/template-web.js"></script>
    <script src="../js/lobsterupload.js"></script>
    <!-- <script src="../js/jquery-smartphoto.min.js" ></script> -->
    <style>
        .bottom {
            background-color: #F5F5F5;
            position: fixed;
            bottom: 0;
            left: 0;
            right: 0;
            align-items: center;
            display: flex;
            padding: 10px 4px;
        }

        .btn {
            height: 40px;
            line-height: 40px;
        }
    </style>
</head>

<body ontouchstart>
    <div id="goodslist">

    </div>
    <div style="height: 10px;background-color:#F5F5F5;"></div>
    <div id="refund">

    </div>
    <div id="imgListdiv"></div>
    <!-- <div class="page-bd-15">
        <div class="weui-uploader">
            <div class="weui-uploader__bd">
                <ul class="weui-uploader__files">
                </ul>
                <div class="weui-uploader__input-box">
                    <input class="weui-uploader__input" accept="image/*" multiple="" type="file"
                        onchange="uploadimgs(this)">
                </div>
            </div>
        </div>
    </div> -->
    <!-- <div class="weui-gallery">
        <span class="weui-gallery__img">
            <img src="../images/book.png"/>
            <img src="../images/cart.png"/>
        </span>
        <div class="weui-gallery__opr">
        </div>
    </div> -->

    <div style="height: 10px;background-color:#F5F5F5;"></div>
    <div class="weui-cells__title">补充描述和凭证</div>
    <div class="weui-cells weui-cells_form">
        <div class="weui-cell">
            <div class="weui-cell__bd">
                <textarea class="weui-textarea" id="refundMemo" placeholder="补充描述，有助于商家更好的处理售后问题" rows="3"></textarea>
            </div>
        </div>
    </div>
    <div class="bottom">
        <div style="flex:1;text-align:right;">
            <a href="javascript:;" class="btn weui-btn weui-btn_mini weui-btn_primary bg-orange torefund"></i>提交</a>
        </div>
    </div>

    <div id="half" class='weui-popup__container popup-bottom'>
        <div class="weui-popup__overlay"></div>
        <div class="weui-popup__modal">
            <div class="toolbar">
                <div class="toolbar-inner">
                    <a href="javascript:;" class="picker-button close-popup">关闭</a>
                    <h1 class="title">货物状态</h1>
                </div>
            </div>
            <div class="modal-content" id="modalcontent">
                <div class="weui-panel__bd" id="goodsstatuslist">

                </div>
            </div>
        </div>
    </div>
    <div id="half2" class='weui-popup__container popup-bottom'>
        <div class="weui-popup__overlay"></div>
        <div class="weui-popup__modal">
            <div class="toolbar">
                <div class="toolbar-inner">
                    <a href="javascript:;" class="picker-button close-popup">关闭</a>
                    <h1 class="title">退款原因</h1>
                </div>
            </div>
            <div class="modal-content" id="modalcontent2">
                <div class="weui-panel__bd" id="reasonlist">

                </div>
            </div>
        </div>
    </div>
</body>

</html>
<script type="text/template" id="goodstemp">
    <div class="weui-cells weui-cells_checkbox" style="display:flex;align-items: center;">
        {{each list item idx}}
        <div class="weui-cell__hd">
            <a href="javascript:void(0);" class="weui-media-box weui-media-box_appmsg">
                <div class="weui-media-box__hd">
                    <img class="weui-media-box__thumb" src="{{item.SpecImg}}" alt="">
                </div>
                <div class="weui-media-box__bd">
                    <h4 class="weui-media-box__title">{{item.GoodsName}}</h4>
                    <p class="weui-media-box__desc spec" data-item="{{item}}">规格 {{item.SpecName}}</p>
                    <div class="weui-media-box__desc" style="display: flex;"> ￥{{item.GoodsPrice}}</div>
                </div>
            </a>
        </div>
        <div class="weui-cell__ft" style="flex: 1;text-align:center;">
            <div class="weui-count" data-idx="{{idx}}">
                <a class="weui-count__btn weui-count__decrease"></a>
                <input class="weui-count__number" type="number" value="{{item.GoodsNum}}" />
                <a class="weui-count__btn weui-count__increase"></a>
            </div>
        </div>
        {{/each}}
    </div>
</script>
<script type="text/template" id="goodsstatustemp">
    <div class="weui-cells">
        {{each list item }}
        <a class="weui-cell weui-cell_access goodsstatus" data-item="{{item}}" href="javascript:;">
            <div class="weui-cell__bd">
                <p>{{item.Name}}</p>
            </div>
            <div class="weui-cell__ft">
            </div>
        </a>
        {{/each}}
    </div>
</script>
<script type="text/template" id="reasontemp">
    <div class="weui-cells">
         {{each list item }}
        <a class="weui-cell weui-cell_access reason" data-item="{{item}}" href="javascript:;">
            <div class="weui-cell__bd">
                <p>{{item.Name}}</p>
            </div>
            <div class="weui-cell__ft">
            </div>
        </a> 
        {{/each}}
    </div>
</script>


<script type="text/template" id="refundtemp">
     <div class="weui-cells">
            <div class="weui-cell">
                <div class="weui-cell__bd">
                    <p>退货数量</p>
                </div>
                <div class="weui-cell__ft">x{{goods.GoodsNum}}</div>
            </div>
            {{if(goods.ReturnGoodsNum>0)}}
            <div class="weui-cell">
                <div class="weui-cell__bd">
                    <p>已退数量</p>
                </div>
                <div class="weui-cell__ft">x{{goods.ReturnGoodsNum}}</div>
            </div>
            {{/if}}
            {{if(refund.RefundType==1)}}
            <a class="weui-cell weui-cell_access togoodsstatus" href="javascript:;">
                <div class="weui-cell__bd">
                    <p>货物状态</p>
                </div>
                <div class="weui-cell__ft">
                    {{refund.CargoStatustxt||'请选择'}}
                </div>
            </a>
            {{/if}}
            <a class="weui-cell weui-cell_access torefundreason" href="javascript:;">
                <div class="weui-cell__bd">
                    <p>退款原因</p>
                </div>
                <div class="weui-cell__ft">
                    {{refund.RefundDesc||'请选择'}}
                </div>
            </a>
            <div class="weui-cell">
                <div class="weui-cell__bd">
                    <p>退款金额</p>
                </div>
                <div class="weui-cell__ft">￥{{goods.Price}}</div>
            </div>
        </div>
        
    </div>
</script>
<script>
    function removeimgs(obj) {
        $.confirm('您确定要删除吗?', '确认删除?', function () { $(obj).remove(); });
        return false;
    }
    function uploadimgs(obj) {
        var files = obj.files;
        var len = files.length;
        for (var i = 0; i < len; i++) {
            lrz(files[i], { width: 750, fieldName: "file" }).then(function (data) {
                $.post("/upimg", { imgbase64: data.base64 }, function (rs) {
                    $(obj).parent().prev().append('<li onclick="removeimgs(this)" class="weui-uploader__file " style="background-image:url(/' + rs.src + ')"><input value="' + rs.src + '"  type="hidden"  name="files" /></li>');
                }, 'json');

            }).then(function (data) {

            }).catch(function (err) {
                console.log(err);
            });
        }
    }
    lobsterh5.main({
        data: {
            goods: [],
            GoodsNum: 0,
            imgList: [],
            uploadUrl: "",
            desc: '',
            refund: {

            },
            CargoStatus: [],
            RefundType: [], //未收到货退款原因
            RefundType2: [], //已收到货退款原因
        },
        //初始化页面
        pageload: function () {
            var self = this;
            self.data.goods = JSON.parse(lobsterh5.GetUrlParam("goods", decodeURIComponent(location.href)));
            self.data.goods.forEach(a => {
                a.GoodsNum2 = parseInt(a.GoodsNum) - parseInt(a.ReturnGoodsNum);
                a.GoodsNum = parseInt(a.GoodsNum) - parseInt(a.ReturnGoodsNum);
                a.Price = parseFloat(a.GoodsPrice) * parseInt(a.GoodsNum);
            });  
            self.data.refund.RefundType = lobsterh5.GetUrlParam("type");
            if (self.data.refund.RefundType == 2) {
                self.data.refund.CargoStatus = 2;
                $("title").text("退货退款");
            } else {
                $("title").text("退款");
            }

            self.initevent();
            self.initgoods();
            Promise.all([
                self.getDic(8144), self.getDic(8145),
                self.getDic(8146)
            ]).then(res => {
                self.data.CargoStatus = res[0].appbasedict;
                self.initgoodsstatustemp();
                self.data.RefundType = res[1].appbasedict;
                self.data.RefundType2 = res[2].appbasedict;
                self.initrefundreasontemp();
                self.initrefundtemp();
            }).catch(res => {

            })

            $("#imgListdiv").lobsterupload({
                onRemoveSuccess: function (data) {
                    console.log("removesuccess", data);
                    var arr = self.data.imgList;
                    arr.forEach((a, index) => {
                        if (data == a) {
                            arr.splice(index, 1);
                        }
                    });
                    self.data.imgList = arr;
                },
                onUploadSuccess: function (data) {
                    self.data.imgList.push(data);
                },
                onUploadFail: function (data) {
                    console.log("uploadfail", data);
                },
            })
        },
        initgoods: function () {
            var self = this;
            var html = template("goodstemp", { list: self.data.goods });
            $("#goodslist").html(html);
        },
        initrefundreasontemp: function () {
            var self = this;
            if (self.data.refund.CargoStatus == 1) {
                html = template("reasontemp", { list: self.data.RefundType });
            } else {
                html = template("reasontemp", { list: self.data.RefundType2 });
            }
            $("#reasonlist").html(html);
        },
        initgoodsstatustemp: function () {
            var self = this;
            var html = template("goodsstatustemp", { list: self.data.CargoStatus });
            $("#goodsstatuslist").html(html);
        },
        initrefundtemp: function () {
            var self = this;
            var html = template("refundtemp", { refund: self.data.refund, goods: self.data.goods[0] });
            $("#refund").html(html);
        },
        //初始化事件
        initevent: function () {
            var self = this;
            $("#refund").on("click", ".togoodsstatus", function () {
                $("#half").popup();//打开 
            })
            $("#refund").on("click", ".torefundreason", function () {
                if (!self.data.refund.CargoStatus && self.data.refund.RefundType == 1) {
                    $.toast("请选择货物状态", 'text');
                    return;
                }
                $("#half2").popup();//打开 
            })
            $("#goodsstatuslist").on("click", ".goodsstatus", function () {
                var item = $(this).data("item");
                if (item.Code != self.data.CargoStatus)
                    self.data.refund.RefundDesc = "";
                self.data.refund.CargoStatus = item.Code;
                self.data.refund.CargoStatustxt = item.Name;

                self.initrefundreasontemp();
                self.initrefundtemp();
                $.closePopup();
            })
            $("#reasonlist").on("click", ".reason", function () {
                var item = $(this).data("item");
                self.data.refund.RefundDesc = item.Name;
                self.initrefundtemp();
                $.closePopup();
            })
            $(document).on("click", '.weui-count__decrease', function (e) {
                var idx = $(this).parent().data("idx");
                self.changenum(idx, 0);
                var $input = $(e.currentTarget).parent().find('.weui-count__number');
                $input.val(self.data.goods[idx].GoodsNum);
                self.initrefundtemp();
            })
            $(document).on("click", '.weui-count__increase', function (e) {
                var idx = $(this).parent().data("idx");
                self.changenum(idx, 1);
                var $input = $(e.currentTarget).parent().find('.weui-count__number');
                $input.val(self.data.goods[idx].GoodsNum);
                self.initrefundtemp();
            })
            $("#refundMemo").change(function () {
                self.data.refund.RefundMemo = $(this).val();
            })
            $(".torefund").click(function () {
                var refund = self.data.refund;
                if (refund.RefundType == 1 && !refund.CargoStatustxt) {
                    $.toast("请选择货物状态", "text")
                    return;
                }
                if (!refund.RefundDesc) {
                    $.toast("请选择退款原因", "text");
                    return;
                }
                if (!refund.RefundMemo) {
                    $.toast("请填写描述", "text");
                    return;
                }
                $.showLoading("提交中...");
                var imgs = ''
                if (self.data.imgList.length > 0)
                    imgs = self.data.imgList.join(',');
                refund.OrderNo = self.data.goods[0].OrderNo;
                refund.RefundFee = self.data.goods[0].Price;
                refund.UserId = localStorage.getItem("userId");
                refund.Imgs = imgs;
                lobsterh5.POST("/lowcode/APP20200616102057595/shop/?fun=mall.refund", {
                    refund: JSON.stringify(refund),
                    goods: JSON.stringify(self.data.goods),
                }).then(res => {
                    $.hideLoading();
                    location.href = "list.html";
                }).catch(res => {
                    $.toast(res.msg, 'forbidden');

                })
            })
        },
        //获取支付类型字典
        getDic: function (classId) {
            return new Promise((resolve, reject) => {
                lobsterh5.GET("/common/v1/BasicData/GetAppBaseDict", {
                    classId: classId,
                    appKey: "APP20200616102057595"
                }).then(res => {
                    resolve(res);
                }).catch(res => {
                    reject(res);
                });
            })
        },
        changenum(idx, type) {
            var self = this;
            if (type == 0) {
                self.data.goods[0].GoodsNum--
                if (self.data.goods[0].GoodsNum < 1)
                    self.data.goods[0].GoodsNum = 1
            } else {
                self.data.goods[0].GoodsNum++
                if (self.data.goods[0].GoodsNum > self.data.goods[0].GoodsNum2)
                    self.data.goods[0].GoodsNum = self.data.goods[0].GoodsNum2;
            }
            self.data.goods[0].Price = parseFloat(self.data.goods[0].GoodsPrice) * parseInt(self.data.goods[0].GoodsNum);
        },
    })
</script>